<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于标记和选择，我们提供了更加丰富的表现形式，能够较全面的涵盖您的使用场景
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-tag plain>标签</fu-tag>
		</fu-section>

		<fu-section title="自定义尺寸" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag size="large" type="warning">标签</fu-tag>
				<fu-tag>标签</fu-tag>
				<fu-tag size="mini" type="success">标签</fu-tag>
			</view>
		</fu-section>

		<fu-section title="内置形状" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag shape="square" plain>标签</fu-tag>
				<fu-tag shape="circle" type="warning" plain>标签</fu-tag>
			</view>
		</fu-section>

		<fu-section title="自定义主题" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag>标签</fu-tag>
				<fu-tag type="warning">标签</fu-tag>
				<fu-tag type="success">标签</fu-tag>
				<fu-tag type="error">标签</fu-tag>
				<fu-tag type="info">标签</fu-tag>
			</view>
		</fu-section>

		<fu-section title="镂空带背景色" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag plainFill plain>标签</fu-tag>
				<fu-tag type="warning" plainFill plain>标签</fu-tag>
				<fu-tag type="success" plainFill plain>标签</fu-tag>
				<fu-tag type="error" plainFill plain>标签</fu-tag>
				<fu-tag type="info" plainFill plain>标签</fu-tag>
			</view>
		</fu-section>

		<fu-section title="可关闭标签" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag type="warning" text="标签" size="large" closable show></fu-tag>
				<fu-tag type="error" text="标签" size="medium" closable show></fu-tag>
				<fu-tag type="success" text="标签" size="mini" closable show></fu-tag>
			</view>
		</fu-section>
		
		<fu-section title="关闭按钮的位置" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag type="warning" text="标签" size="large" closePlace="right" closable show></fu-tag>
				<fu-tag type="error" text="标签" size="medium" closePlace="right" closable show></fu-tag>
				<fu-tag type="success" text="标签" size="mini" closePlace="right" closable show></fu-tag>
			</view>
		</fu-section>
		
		<fu-section title="带图标和图片" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-tag text="标签" size="large" icon="location"></fu-tag>
				<fu-tag text="标签" size="medium" icon="gift-fill"></fu-tag>
				<fu-tag text="标签" size="mini" :icon="$mAssetsPath.index1"></fu-tag>
			</view>
		</fu-section>
		
		<fu-section title="可单选标签" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-flex-wrap fu-gap-30">
				<block v-for="(item, index) in radios" :key="index">
					<fu-tag
					    :text="`选项${index + 1}`"
					    :plain="!item.checked"
					    type="warning"
					    :index="index"
					    @click="handleRadio" />
				</block>
			</view>
		</fu-section>
		
		<fu-section title="可多选标签" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-flex-wrap fu-gap-30">
				<block v-for="(item, index) in checkboxs" :key="index">
					<fu-tag
					    :text="`选项${index + 1}`"
					    :plain="!item.checked"
					    type="error"
					    :index="index"
					    @click="handleCheckbox" />
				</block>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref } from 'vue';
	
	// data数据
	const { $mAssetsPath } = getCurrentInstance().appContext.config.globalProperties;
	let radios = ref([
		{ checked: true },
		{ checked: false },
		{ checked: false }
	]);
	let checkboxs =ref([
		{ checked: true },
		{ checked: false },
		{ checked: false }
	]);
	
	// methods方法
	const handleRadio = (e) => {
		radios.value.map((item,index) => {
			item.checked = index === e? true: false
		})
	};
	
	const handleCheckbox = (e) => {
		checkboxs.value[e].checked = !checkboxs.value[e].checked
	};
</script>

<style lang="scss">
	page {
		background-color: $bg-color-grey;
	}
	
	.capsule {
		display: inline-flex;
		vertical-align: middle;
		width: 20%;
		min-width: 136rpx;
		height: 45rpx;
	}

	.tag {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(50%, -50%);
	}
</style>